<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title>-_-</title>

<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="index.css" />

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="index.js"></script>

<script type="text/javascript" src="phonegap-nfc.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-toast.js"></script>
<script type="text/javascript" charset="utf-8" src="js/read_d.js"></script>


<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?sensor=true">
	
</script>

<script type="text/javascript">
	var vMap;
	function onSuccess(position) {
		currentLocation = position;
		alert("onSuccess" + currentLocation);

		if (!map) {
			loadMapScript();
		}
	}

	function onError(error) {
		alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
	}

	window.onload = function() {
		var latlng = new google.maps.LatLng(37.8117384, 126.9397817);
		var myOptions = {
			zoom : 14,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_cvs"),
				myOptions);
		navigator.geolocation.getCurrentPosition(null, onError);

	}

	var fInitialize = function(lat, lng) {
		var latlng = new google.maps.LatLng(lat, lng);
		alert(latlng);
		var myOptions = {
			zoom : 14,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_cvs"),
				myOptions);
		vMap = map;
		navigator.geolocation.getCurrentPosition(onSuccess, onError);

		var marker = new google.maps.Marker({
			map : map,
			position : latlng
		
		});


		fWrite(lat + ',' + lng + '\n');
		
		
		 
		/* 	 	//load test.txt => log view
		 var input = '';
		 input += '39.23124,128.234234\n';
		 input += '31.23124,108.234234\n';
		 input += '32.23224,112.234234\n';
		 input += '37.21124,125.234234\n';
		
		 var input_test = '';
		 for (var i=0; i<input_test.length; i++){
		 input_test[i] = latlng
		 }

		 input = input.split('\n')
		 var lat = [];
		 var lng = [];
		 for (var i=0; i<input.length; i++){
		 var arData = input[i].split(',');
		 lat[i] = Number(arData[0]);
		 lng[i] = Number(arData[1]);
		 }

		 for(var i=0; i<lat.length; i++){
		 var marker = new google.maps.Marker({
		 map: map,
		 position: new google.maps.LatLng(lat[i], lng[i]),
		 icon: 'img/brown_MarkerE.png'
		 });	 	
		 } */
	};

	var fInitialize2 = function(lat, lng) {
		var latlng = new google.maps.LatLng(lat, lng);
		alert(latlng); //(NaN,NaN) 		
		var myOptions = {
			zoom : 14,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};

		//excute polygon creator
		var creator = new PolygonCreator(vMap)
		creator.showData();
		//reset poly
		document.getElementById('reset').onclick = function() {
			creator.destroy(), creator = null, creator = new PolygonCreator(
					vMap);
			$('#showpath').empty();

		};
		document.getElementById('getpath').onclick = function() {
			//creator.showData(); 로 좌표 얻을 수 있음
			$('#showpath').empty();
			$('#showpath').append(creator.showData());
			
			 
			var pathLatLng;
		
			pathLatLng = creator.showData(),

		};

		//load test.txt => log view

/* 		var input = '';
		input += '39.23124,128.234234\n';
		input += '31.23124,108.234234\n';
		input += '32.23224,112.234234\n';
		input += '37.21124,125.234234\n';
		input = input.split('\n')
		var lat = [];
		var lng = [];
		for (var i = 0; i < input.length; i++) {
			var arData = input[i].split(',');
			lat[i] = Number(arData[0]);
			lng[i] = Number(arData[1]);
		}
		alert(lat[0] + ' + ' + lng[0]);
		alert(lat[1] + ' ++ ' + lng[1]);
		var bounds  = new google.maps.LatLngBounds();

		for (var i = 0; i < 20; i++) {
			var position = new google.maps.LatLng(lat[i], lng[i]);
			marker(position);

			var marker = new google.maps.Marker({
				map : vMap,
				position : position,
				icon : 'img/brown_MarkerE.png'
			});
			bounds.extend(position);

		}
		//vMap.fitBounds(bounds);       // auto-zoom
		vMap.panToBounds(bounds);     // auto-center
		
 */

	};
</script>
<!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
</head>

<body>
	<div data-role="page" id="page-home" class="type-interior"
		data-theme="b">
		<div data-role="header" data-theme="b">
			<h1 style="text-align: center">Geolocation test</h1>
		</div>
		<div class="content-primary">
			<div class="api-div" id="api-geolocation">
				<h2>Geolocation</h2>
				<blockquote>
					<p>
						The
						<code>geolocation</code>
						object provides access to the device's GPS sensor.
					</p>
				</blockquote>
				<h4 class="help">
					<b>Toggle</b> to stop/start geolocation watch. <br /> <b>Get
						Current</b> for one-time geolocation reading.
				</h4>
				<div class="ui-grid-a">
					<div class="ui-block-a">
						<div data-role="button" onclick="toggleWatchPosition();">Toggle</div>
					</div>
					<div class="ui-block-b">
						<div data-role="button" onclick="getCurrentPosition();">Get
							Current</div>
					</div>
					<div class="ui-block-a">
						<div data-role="button" onclick="getCurrentPosition2();">Get
							Lat, Lgt</div>
					</div>
					<button onclick="fInitialize2();">Draw My Map</button>
				</div>
				<div id="cur_position"></div>
				<!-- <img id="map" />-->
				<div id="map_cvs" style="width: 320px; height: 240px;"></div>
				<textarea id="showpath" style="width: 900px; height: 140px;"></textarea>
				<br> <br>
				<button id="reset">Reset</button>
				<button id="getpath">Save My Map</button>
				
			</div>
		</div>
	</div>
	<script type="text/javascript" charset="utf-8" src="js/geolocation.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/polygon.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/file.js"></script>
</body>
</html>
